<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="cr-domain-experimental.html">

<dom-module id="cr-domain-param">
  <template>
    <style>
      [hidden] {
        display: none !important;
      }

      a {
        color: var(--default-primary-color);
      }

      .param {
        border-left: 3px solid transparent;
      }
      .param:hover {
        border-left: 3px solid hsl(0, 0%, 84%);
      }

      .param-pair {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        align-items: baseline;
        margin-bottom: 6px;
      }

      .param-type {
        font-weight: bold;
      }

      [optional] {
        opacity: .9;
      }

      [optional]:after {
        content: "optional";
        opacity: .6;
        font-size: 70%;
        display: block;
      }

      .param-name {
        flex: 1 0 0;
        -ms-flex: 1 0 0;
        -webkit-flex: 1 0 0;
        text-align: right;
        color: black;
        word-wrap: break-word;
      }

      .param-def {
        flex: 3 0 0;
        -ms-flex: 3 0 0;
        -webkit-flex: 3 0 0;
        margin-left: 20px;

        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
      }

      .param-def, .param-name {
        vertical-align: text-top;
      }

      .param-sub > .param-def {
        border-left: solid hsl(0, 0%, 85%) 1px;
        padding-left: 5px;
      }

      .param-description {
        font-size: 90%;
      }
      .param-description code {
          font-size: 120%;
      }

      h6 {
        margin: 12px 0;
        font-size: 16px;
        font-weight: normal;
        color: hsl(0,0%,63%);
      }

      .monospace {
        font-family: Consolas, Menlo, monospace;
      }
    </style>
    <div class="param">
      <div class="param-pair">
        <dt class="param-name monospace" optional$="[[param.optional]]">[[param.name]]</dt>
        <dd class="param-def">
          <span hidden$="[[!param.type]]" class="param-type">
            [[param.type]]
            <span hidden$="[[!param.items]]">
              <span hidden$="[[!param.items.type]]">
                [ [[param.items.type]] ]
              </span>
              <span hidden$="[[param.items.type]]">
                <a href$="[[_computeUrl(version, domain, referral)]]">[[referral]]</a>
              </span>
            </span>
          </span>
          <span hidden$="[[param.type]]">
            <span class="param-type" hidden$="[[!referral]]">
              <a href$="[[_computeUrl(version, domain, referral)]]">[[referral]]</a>
            </span>
          </span>
          <span class="param-description">
            <span inner-h-t-m-l="[[param.description]]" hidden$="[[!param.description]]"></span>

            <span>[[_computeParamEnum(param.enum)]]</span>
            <cr-domain-experimental item="[[param]]"></cr-domain-experimental>
          </span>
        </dd>
      </div>
      <div hidden$="[[!_paramItemExist(param)]]" class="param-pair param-sub">
        <div class="param-name"></div>
        <div class="param-def">
          <h6>Array element:</h6>
          [[param.items.description]]
          <template is="dom-repeat" items="[[param.items.properties]]">
            <cr-domain-param param="[[item]]" version="[[version]]" domain="[[domain]]"></cr-domain-param>
          </template>
          <span>[[_computeParamEnum(param.items.enum)]]</span>
        </div>
      </div>
    </div>
  </template>
  <script>
    customElements.define('cr-domain-param', class extends Polymer.Element {
      static get is() { return 'cr-domain-param'; }
      static get properties() {
        return {
          param: Object,
          referral: {
            type: String,
            computed: '_computeReferral(param)'
          },
          version: String,
          domain: String
        }
      }
      _computeReferral(param) {
        if (param.type) {
          return (param.items && param.items['$ref']) || '';
        }
        return param['$ref'];
      }
      _hasType(param) {
        return param.type !== 'false';
      }
      _computeUrl(version, domain, referral) {
        // Referral points to a different domain
        if (referral.indexOf('.') !== -1) {
          return `${version}/${referral.replace('.', '#type-')}`;
        }
        return `${version}/${domain}#type-${referral}`;
      }
      _computeParamEnum(paramEnum) {
        return paramEnum && paramEnum.join(', ') || '';
      }
      _paramItemExist(param) {
        return param.items && (param.items.properties || param.items.enum || param.items.description);
      }
    });
  </script>
</dom-module>
